<script setup>
import { getQuestionDetail, getAnswer } from '../api';
import { useRoute } from "vue-router"
import { reactive } from 'vue';
const route = useRoute()
import Answer from "./Answer.vue"

const detail = reactive({v:{}});
getQuestionDetail( route.params.id ).then(res=>{
  console.log(res.data.data);
  detail.v = res.data.data;
  detail.tags = res.data.data.tags.split(",");
})

const answerList = reactive([]);
getAnswer({
  question_id: route.params.id
}).then(res=>{
  answerList.push(...res.data.data.list)
})

</script>

<template>
  <div class="detailBox">
    <h1>{{ detail.v.title }}</h1>
    <p>
      <img :src="detail.v.avatar" alt="">
      <span>{{ detail.v.nickname }}</span>
      <span>发布于12分钟之前</span>
      <span> <i>{{ detail.v.pv }}</i> 阅读</span>
    </p>
    <p class="content">
      {{ detail.v.content }}
    </p>
    <div class="tags">
      <span v-for="item in detail.tags" :key="item">{{ item }}</span>
    </div>
    <div class="buttons">
      <van-button>我要回答</van-button>
      <van-button>查看学员联系方式</van-button>
    </div>
    <div class="answerBox">
      <Answer v-for="item in answerList" :key="item.id" :value="item" />
    </div>
    <van-field
      v-model="message"
      rows="2"
      autosize
      label="留言"
      type="textarea"
      maxlength="50"
      placeholder="请输入留言"
      show-word-limit
    />
  </div>
</template>

<style>
img{
  width: 100px;
}
</style>